<template>
  <div class="right-container">
    <el-row type="flex" justify="space-between" class="staff-body">
      <!--左菜单-->
      <div class="head-container">
        <!-- temporary -->
        <el-input
          v-model="searchMenuVal"
          placeholder="请输入关键词,按下回车搜索"
          clearable
          size="small"
          @keyup.enter.native="searchMenu"
        >
        </el-input>
        <!-- <div>部门架构</div> -->
        <common-tree
          ref="commonTree"
          class="left-tree"
          :data="treeData ? treeData : []"
          :defaultProps="defaultProps"
          :expand-on-click-node="false"
          default-expand-all
          @node-click="handleNodeClick"
          nodeKey="nodeId"
          @current-change="currentChange"
        >
          <div slot-scope="{ node, data }" class="custom-tree-node">
            <span
              class="toe"
              :class="{
                notTemplate:
                  data.serviceTemplateId ||
                  (data.cgColony && data.cgColony.colonyTemplateId),
              }"
              :title="node.label"
              >{{ data.model_example_name }}</span
            >
            <span class="fr">
              <i
                v-if="node.level !== 1"
                class="iconfont el-icon-edit"
                title="编辑"
                @click.stop="edit(data, node.level)"
              />
              <i
                v-if="node.level !== 3"
                class="iconfont el-icon-circle-plus-outline"
                title="添加"
                @click.stop="add(data, node.level)"
              />
              <i
                slot="reference"
                v-if="node.level !== 1"
                class="iconfont el-icon-delete"
                title="删除"
                @click="del(data, node.level)"
              />
            </span>
          </div>
        </common-tree>
      </div>
      <!--用户数据-->
      <div class="staff-container-right">
        <RightContainer>
          <template v-slot:operate-btn>
            <el-button
              class="mr10"
              type="primary"
              @click="toAddHost"
              size="small"
              >新增</el-button
            >
            <!-- temporary -->
            <el-input
              v-model="query.modelExampleName"
              placeholder="请输入实例名，按下回车搜索"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </template>
          <!-- 列表 -->
          <template v-slot:data>
            <el-table
              v-loading="loading"
              :data="host_List"
              :header-cell-style="{ background: '#eee', height: '60px' }"
              size="small"
              :cell-style="cellStyle"
              height="calc(100vh - 234px)"
              @row-click="goInfo"
              ref="listTable"
            >
              <el-table-column
                label="实例名"
                show-overflow-tooltip="ture"
                align="left"
                prop="model_example_name"
              />
              <el-table-column
                show-overflow-tooltip="ture"
                v-for="item in tableFIelds"
                :key="item.modelFieldId"
                :label="item.comment"
                align="left"
                :prop="item.newFieldName"
              ></el-table-column>
              <el-table-column label="操作" align="left" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click.native.stop="delExample(scope.row.model_example_id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="host_List.length > 0"
              :total="host_List.length"
              :page.sync="query.pageNum"
              :limit.sync="query.pageSize"
              @pagination="getDataQuery()"
            />
          </template>
        </RightContainer>
      </div>
    </el-row>

    <!-- 新建集群弹窗 -->
    <el-dialog
      title="新建集群"
      :visible.sync="addClusterVisible"
      :close-on-click-modal="false"
      @close="closeModal"
    >
      <div style="margin-bottom: 20px">
        <el-radio v-model="addClusterByTemplate" :label="true"
          >模板新建</el-radio
        >
        <el-radio v-model="addClusterByTemplate" :label="false"
          >直接新建</el-radio
        >
      </div>
      <!-- 从模板新建 -->
      <el-form
        v-if="addClusterByTemplate"
        ref="addClusterForm"
        :model="addClusterForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="集群模版" prop="colonyTemplateId">
          <el-select
            v-model="addClusterForm.colonyTemplateId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in addClusterSelect"
              :key="item.colonyTemplateId"
              :label="item.colonyTemplateName"
              :value="item.colonyTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="colonyName" label="集群名称">
          <el-input
            v-model="addClusterForm.colonyName"
            placeholder="请输入集群名称"
          />
        </el-form-item>
      </el-form>
      <!-- 直接新建 -->
      <el-form
        v-else
        ref="addClusterForm"
        :model="addClusterForm"
        label-width="110px"
        :rules="rules"
      >
        <el-form-item prop="colonyName" label="集群名称">
          <el-input
            v-model="addClusterForm.colonyName"
            placeholder="请输入集群名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addClusterSubmit('addClusterForm')"
          >确 定</el-button
        >
        <el-button @click="addClusterVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑集群弹窗 -->
    <el-dialog
      title="编辑集群"
      :visible.sync="editClusterVisible"
      :close-on-click-modal="false"
      @close="closeModal"
    >
      <!-- 从模板编辑 -->
      <el-form
        v-if="nodeData.cgColony && nodeData.cgColony.colonyTemplateId"
        ref="editClusterForm"
        :model="editClusterForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="集群模版" prop="colonyTemplateId">
          <el-select
            v-model="editClusterForm.colonyTemplateId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in addClusterSelect"
              :key="item.colonyTemplateId"
              :label="item.colonyTemplateName"
              :value="item.colonyTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="colonyName" label="集群名称">
          <el-input
            v-model="editClusterForm.colonyName"
            placeholder="请输入集群名称"
          />
        </el-form-item>
      </el-form>
      <!-- 直接编辑 -->
      <el-form
        v-else
        ref="editClusterForm"
        :model="editClusterForm"
        label-width="110px"
        :rules="rules"
      >
        <el-form-item prop="colonyName" label="集群名称">
          <el-input
            v-model="editClusterForm.colonyName"
            placeholder="请输入集群名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="editClusterSubmit('editClusterForm')"
          >确 定</el-button
        >
        <el-button @click="editClusterVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新建服务弹窗 -->
    <el-dialog
      title="新建服务"
      :visible.sync="addServiceVisible"
      :close-on-click-modal="false"
      @close="closeModal"
    >
      <div style="margin-bottom: 20px">
        <el-radio v-model="addServiceByTemplate" :label="true"
          >模板新建</el-radio
        >
        <el-radio v-model="addServiceByTemplate" :label="false"
          >直接新建</el-radio
        >
      </div>
      <!-- 模板新建 -->
      <el-form
        ref="addServiceForm"
        :model="addServiceForm"
        label-width="80px"
        :rules="rules"
        v-if="addServiceByTemplate"
      >
        <el-form-item label="服务模版" prop="templateId">
          <el-select
            v-model="addServiceForm.serviceTemplateId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in addServiceSelect"
              :key="item.serviceTemplateId"
              :label="item.serviceTemplateName"
              :value="item.serviceTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="serviceName" label="模块名称">
          <el-input
            v-model="addServiceForm.serviceName"
            placeholder="请输入模块名称"
          />
        </el-form-item>
      </el-form>
      <!-- 直接新建 -->
      <el-form
        v-else
        ref="addServiceForm"
        :model="addServiceForm"
        label-width="110px"
        :rules="rules"
      >
        <el-form-item prop="serviceName" label="服务名称">
          <el-input
            v-model="addServiceForm.serviceName"
            placeholder="请输入服务名称"
          />
        </el-form-item>
        <el-form-item prop="comment" label="备注">
          <el-input v-model="addServiceForm.comment" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item prop="serviceMaintainer" label="服务维护人">
          <el-input
            v-model="addServiceForm.serviceMaintainer"
            placeholder="请输入服务维护人"
          />
        </el-form-item>
        <el-form-item prop="serviceBackupsMaintainer" label="备份服务维护人">
          <el-input
            v-model="addServiceForm.serviceBackupsMaintainer"
            placeholder="请输入备份服务维护人"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addServiceSubmit('addServiceForm')"
          >确 定</el-button
        >
        <el-button @click="addServiceVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑服务模版 -->
    <el-dialog
      title="编辑服务"
      :visible.sync="editServiceVisible"
      :close-on-click-modal="false"
      @close="closeModal"
    >
      <!-- 模板新建 -->
      <el-form
        ref="editServiceForm"
        :model="editServiceForm"
        label-width="80px"
        :rules="rules"
        v-if="nodeData.serviceTemplateId"
      >
        <el-form-item label="服务模版" prop="templateId">
          <el-select
            v-model="editServiceForm.serviceTemplateId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in addServiceSelect"
              :key="item.serviceTemplateId"
              :label="item.serviceTemplateName"
              :value="item.serviceTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="serviceName" label="模块名称">
          <el-input
            v-model="editServiceForm.serviceName"
            placeholder="请输入模块名称"
          />
        </el-form-item>
      </el-form>
      <!-- 直接新建 -->
      <el-form
        v-else
        ref="editServiceForm"
        :model="editServiceForm"
        label-width="110px"
        :rules="rules"
      >
        <el-form-item prop="serviceName" label="服务名称">
          <el-input
            v-model="editServiceForm.serviceName"
            placeholder="请输入服务名称"
          />
        </el-form-item>
        <el-form-item prop="comment" label="备注">
          <el-input
            v-model="editServiceForm.comment"
            placeholder="请输入备注"
          />
        </el-form-item>
        <el-form-item prop="serviceMaintainer" label="服务维护人">
          <el-input
            v-model="editServiceForm.serviceMaintainer"
            placeholder="请输入服务维护人"
          />
        </el-form-item>
        <el-form-item prop="serviceBackupsMaintainer" label="备份服务维护人">
          <el-input
            v-model="editServiceForm.serviceBackupsMaintainer"
            placeholder="请输入备份服务维护人"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="editServiceSubmit('editServiceForm')"
          >确 定</el-button
        >
        <el-button @click="editServiceVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getToppologyList_Api, //业务拓扑列表查询(左侧菜单)
  getClusterList_Api, //获取集群模板数据
  serviceTemplateList_Api, //获取服务模板数据
  addService_Api, //添加服务
  editService_Api, //编辑服务
  delService_Api, //删除服务
  getHostListByServiceId_Api, //根据服务id获取主机实例列表
  addColony_Api, //添加集群
  editColony_Api, //编辑集群
  delColony_Api, //集群删除
  getToppologyListByCluster_Api, //集群查询主机列表
  getToppologyListByExample_Api, //业务查询主机列表
  getServicecListByColonyId_Api, //获取集群下服务列表
} from "@/api/configuration/business";
import {
  getModelIdCategoryList_Api, //根据模型id查询模型分组列表
  delModelExample_Api, //删除模型实例
} from "@/api/configuration/resource.js";
import {
  getModelCategoryList_Api, //模型分组列表
} from "@/api/configuration/model.js";
import CommonTree from "@/components/CommonTree";
import RightContainer from "@/components/RightContainer";

import { getCurrent_YMDHMS_Time } from "@/utils/common.js";

export default {
  name: "Business_Topology",
  components: {
    CommonTree,
    RightContainer,
  },
  props: {},

  data() {
    return {
      searchMenuVal: "", //菜单搜索
      addClusterByTemplate: true, //是否从模板新建集群
      addServiceByTemplate: true, //是否从模板新建服务
      //分页
      query: {
        pageNum: 1,
        pageSize: 10,
        modelExampleName: "",
      },
      //树形结构数据
      treeData: [],
      //列表数据
      host_List: [],
      defaultProps: {
        label: "model_example_name",
        children: "cgColonyVoList",
      },
      editHostVisible: false, //编辑主机弹框
      loading: false, //列表loading
      //添加集群表单
      addClusterForm: {},
      //编辑集群表单
      editClusterForm: {
        colonyTemplateId: "",
        colonyName: "",
      },
      //添加服务表单
      addServiceForm: {},
      //编辑服务表单
      editServiceForm: {
        serviceTemplateId: "",
        serviceName: "",
      },
      addClusterVisible: false, //控制新建集群弹框
      addServiceVisible: false, //控制新建服务弹框
      editClusterVisible: false, //控制编辑集群弹框
      editServiceVisible: false, //控制编辑集群弹框
      scopeDeptList: [],
      // 表单校验
      rules: Object.freeze({
        colonyTemplateId: [
          { required: true, message: "请选择集群模版id", trigger: "blur" },
        ],
        colonyName: [
          { required: true, message: "请输入集群名", trigger: "blur" },
        ],
        serviceName: [
          { required: true, message: "请输入服务名", trigger: "blur" },
        ],
      }),
      //添加集群的集群模板下拉框数据
      addClusterSelect: [],
      //添加服务的服务模板下拉框数据
      addServiceSelect: [],
      nodeData: {}, //节点数据
      //列表字段数据
      tableFIelds: [],
      serviceId: "", //服务id，跳转添加主机页面用
      serviceName: "", //服务名称，跳转添加主机页面用
      treeNodeData: {}, //分页查询用
      level: 1, //分页查询用
    };
  },
  created() {
    this.getData(); //获取数据
    this.getMenu(); //获取左侧菜单数据
    this.getTableFields(); //根据模型id查询模型分组列表(modelId后端要求暂时写死)
  },
  methods: {
    //获取模版数据
    getData() {
      //获取集群模板数据
      getClusterList_Api().then((res) => {
        this.addClusterSelect = res.rows;
      });
      //获取服务模板数据
      serviceTemplateList_Api().then((res) => {
        this.addServiceSelect = res.rows;
      });
    },
    //获取左侧菜单数据
    getMenu() {
      getToppologyList_Api().then((res) => {
        if (res.data.length) {
          this.treeData = [];
          //处理成适合组件的树形结构
          res.data.forEach((item, index1) => {
            const level_1 = { ...item.cgModelExample };
            level_1.cgColonyVoList = item.cgColonyVoList || [];
            level_1.nodeId = index1 + "";
            if (level_1.cgColonyVoList.length) {
              level_1.cgColonyVoList.forEach((ele, index2) => {
                ele.model_example_name = ele.cgColony.colonyName;
                ele.businessName = level_1.model_example_name;
                ele.cgColonyVoList = ele.cgServiceList || [];
                ele.nodeId = index1 + "-" + index2;
                if (ele.cgColonyVoList.length) {
                  ele.cgColonyVoList.forEach((last, index3) => {
                    last.nodeId = index1 + "-" + index2 + "-" + index3;
                    last.model_example_name = last.serviceName;
                  });
                }
              });
            }
            this.treeData.push(level_1);
          });
        }

        //从其他页面返回
        if (localStorage.node) {
          const node = JSON.parse(localStorage.node);
          this.treeNodeData = node;
          //先设置选中节点状态
          this.$nextTick(() => {
            this.$refs.commonTree.$children[0].setCurrentKey(node.nodeId);
          });
          //获取数据
          this.loading = true;
          if (node.serviceId) {
            //根据服务id获取主机列表
            getHostListByServiceId_Api({
              ...this.query,
              serviceId: node.serviceId,
            }).then((res) => {
              this.host_List = res.rows;
              this.loading = false;
              this.level = 3;
            });
            this.serviceId = node.serviceId;
            this.serviceName = node.serviceName;
          } else if (node.cgColony && node.cgColony.colonyId) {
            //根据集群id获取主机列表
            getToppologyListByCluster_Api({
              ...this.query,
              colonyId: node.cgColony.colonyId,
            }).then((res) => {
              this.host_List = res.rows;
              this.loading = false;
              this.level = 2;
            });
            this.serviceId = "";
          } else if (node.model_example_id) {
            //根据业务id获取主机列表
            getToppologyListByExample_Api({
              ...this.query,
              exampleId: node.model_example_id,
            }).then((res) => {
              this.host_List = res.rows;
              this.loading = false;
              this.level = 1;
            });
            this.serviceId = "";
          }
        } else if (this.treeData.length) {
          //第一次进来
          //根据业务id获取主机列表
          this.query = {
            pageNum: 1,
            pageSize: 10,
          };
          this.treeNodeData.model_example_id =
            this.treeData[0].model_example_id;
          this.loading = true;
          //根据业务id获取主机，默认拿第一个业务的数据
          getToppologyListByExample_Api({
            ...this.query,
            exampleId: this.treeData[0].model_example_id,
          }).then((res) => {
            this.host_List = res.rows;
            this.loading = false;
            this.$nextTick(() => {
              this.$refs.commonTree?.$children[0].setCurrentKey("0");
            });
          });
        }
      });
    },
    //显示添加集群或服务弹窗
    add(data, level) {
      if (level == 1) {
        this.addClusterVisible = true;
      } else {
        this.addServiceVisible = true;
      }
      this.nodeData = data;
    },
    //显示编辑集群或服务弹窗
    edit(data, level) {
      this.nodeData = data;
      if (level == 2) {
        //回显集群信息
        if (this.nodeData.cgColony.colonyTemplateId) {
          //使用集群模版新增的
          this.$set(
            this.editClusterForm,
            "colonyTemplateId",
            this.nodeData.cgColony.colonyTemplateId
          );
        } else {
          //直接新增的
          this.editClusterForm.colonyPath = this.nodeData.cgColony.colonyPath;
        }
        this.$set(
          this.editClusterForm,
          "colonyName",
          this.nodeData.cgColony.colonyName
        );
        this.editClusterVisible = true;
      } else {
        //回显服务信息
        if (this.nodeData.serviceTemplateId) {
          //使用服务模版新增的
          this.$set(
            this.editServiceForm,
            "serviceTemplateId",
            this.nodeData.serviceTemplateId
          );
        } else {
          //直接新增的
          this.$set(this.editServiceForm, "comment", this.nodeData.comment);
          this.$set(
            this.editServiceForm,
            "serviceMaintainer",
            this.nodeData.serviceMaintainer
          );
          this.$set(
            this.editServiceForm,
            "serviceBackupsMaintainer",
            this.nodeData.serviceBackupsMaintainer
          );
          this.$set(
            this.editServiceForm,
            "servicePath",
            this.nodeData.servicePath
          );
        }
        this.$set(
          this.editServiceForm,
          "serviceName",
          this.nodeData.serviceName
        );
        this.editServiceVisible = true;
      }
    },
    //删除集群或服务
    del(data, level) {
      if (level == 2) {
        this.$confirm("是否确认删除该集群?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            //删除集群
            delColony_Api(data.cgColony.colonyId).then((res) => {
              this.$message.success(res.msg);
              this.getMenu();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$confirm("是否确认删除该服务?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            //删除模板
            delService_Api(data.serviceId).then((res) => {
              this.$message.success(res.msg);
              this.getMenu();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //确认添加集群
    addClusterSubmit(formName) {
      this.addClusterForm.modelExampleId = this.nodeData.model_example_id;
      this.addClusterForm.addTime = getCurrent_YMDHMS_Time();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //加拓扑路径
          this.addClusterForm.colonyPath =
            this.nodeData.model_example_name +
            " / " +
            this.addClusterForm.colonyName;
          addColony_Api(this.addClusterForm).then((res) => {
            this.$message.success(res.msg);
            this.addClusterVisible = false;
            this.getMenu();
          });
        } else {
          return false;
        }
      });
    },
    //确认编辑集群
    editClusterSubmit(formName) {
      this.editClusterForm.colonyId = this.nodeData.cgColony.colonyId;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editColony_Api(this.editClusterForm).then((res) => {
            this.$message.success(res.msg);
            this.editClusterVisible = false;
            this.getMenu();
          });
        } else {
          return false;
        }
      });
    },
    //确认添加服务
    addServiceSubmit(formName) {
      this.addServiceForm.colonyId = this.nodeData.cgColony.colonyId;
      this.addServiceForm.addTime = getCurrent_YMDHMS_Time();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //加拓扑路径
          this.addServiceForm.servicePath =
            this.nodeData.businessName +
            " / " +
            this.nodeData.model_example_name +
            " / " +
            this.addServiceForm.serviceName;
          addService_Api(this.addServiceForm).then((res) => {
            this.$message.success(res.msg);
            this.addServiceVisible = false;
            this.getMenu();
          });
        } else {
          return false;
        }
      });
    },
    //确认编辑服务
    editServiceSubmit(formName) {
      this.editServiceForm.serviceId = this.nodeData.serviceId;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editService_Api(this.editServiceForm).then((res) => {
            this.$message.success(res.msg);
            this.editServiceVisible = false;
            this.getMenu();
          });
        } else {
          return false;
        }
      });
    },
    //获取列表字段信息
    getTableFields() {
      this.loading = true; //开启列表loading
      let modelId = "";
      //先找到主机的modelId
      getModelCategoryList_Api()
        .then((res) => {
          res.data.forEach((item) => {
            item.cgModels.forEach((ele) => {
              if (ele.modelType == 1) {
                modelId = ele.modelId;
                //查询字段
                getModelIdCategoryList_Api({ modelId: modelId }).then((res) => {
                  if (res.data.length) {
                    //列表字段生成
                    res.data.forEach((item) => {
                      this.tableFIelds = [
                        ...this.tableFIelds,
                        ...item.cgModelFields,
                      ];
                    });
                    // this.tableFIelds = res.data[0].cgModelFields;
                    this.loading = false;
                  } else this.loading = false; //关闭列表loading
                });
              } else this.loading = false; //关闭列表loading
            });
          });
        })
        .catch((err) => (this.loading = false));
    },
    //表格样式
    cellStyle({ column, columnIndex }) {
      // 状态列字体颜色
      if (columnIndex === 1) {
        return "color: #46a6ff;cursor:pointer;";
      }
    },
    //跳转拓扑详情页面
    goInfo(row) {
      this.$router.push({ path: "Topology_Info?id=" + row.model_example_id });
    },
    //跳转添加主机页面
    toAddHost() {
      if (this.serviceId == "") {
        this.$message.info("请先选择服务模块");
      } else {
        this.$router.push({
          path:
            "addhost?serviceId=" +
            this.serviceId +
            "&serviceName=" +
            this.serviceName,
        });
      }
    },
    //点击树形节点
    handleNodeClick(data, { level }) {
      this.loading = true;
      this.treeNodeData = data;
      this.level = level;
      this.query = {
        pageNum: 1,
        pageSize: 10,
      };
      if (level == 3) {
        //根据服务id获取主机列表
        getHostListByServiceId_Api({
          ...this.query,
          serviceId: data.serviceId,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
        this.serviceId = data.serviceId;
        this.serviceName = data.serviceName;
      } else if (level == 2) {
        //根据集群id获取主机列表
        getToppologyListByCluster_Api({
          ...this.query,
          colonyId: data.cgColony.colonyId,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
        this.serviceId = "";
      } else if (level == 1) {
        //根据业务id获取主机列表
        getToppologyListByExample_Api({
          ...this.query,
          exampleId: data.model_example_id,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
        this.serviceId = "";
      }
      localStorage.setItem("node", JSON.stringify(this.treeNodeData));
    },
    //分页获取数据
    getDataQuery() {
      this.loading = true;
      if (this.level == 3) {
        //根据服务id获取主机列表
        getHostListByServiceId_Api({
          ...this.query,
          serviceId: this.treeNodeData.serviceId,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
        this.serviceId = data.serviceId;
      } else if (this.level == 2) {
        //根据集群id获取主机列表
        getToppologyListByCluster_Api({
          ...this.query,
          colonyId: this.treeNodeData.cgColony.colonyId,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
        this.serviceId = "";
      } else if (this.level == 1) {
        //根据业务id获取主机列表
        getToppologyListByExample_Api({
          ...this.query,
          exampleId: this.treeNodeData.model_example_id,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
        this.serviceId = "";
      }
    },
    //菜单搜索
    searchMenu() {
      if (this.searchMenuVal == "") return;
      const node = this.findNodeById(this.treeData, this.searchMenuVal);
      if (node && node.nodeId) {
        this.treeNodeData = node;
        //先设置选中节点状态
        this.$refs.commonTree.$children[0].setCurrentKey(node.nodeId);
        //获取数据
        this.loading = true;
        if (node.serviceId) {
          //根据服务id获取主机列表
          getHostListByServiceId_Api({
            ...this.query,
            serviceId: node.serviceId,
          }).then((res) => {
            this.host_List = res.rows;
            this.loading = false;
            this.level = 3;
          });
          this.serviceId = node.serviceId;
          this.serviceName = node.serviceName;
        } else if (node.cgColony && node.cgColony.colonyId) {
          //根据集群id获取主机列表
          getToppologyListByCluster_Api({
            ...this.query,
            colonyId: node.cgColony.colonyId,
          }).then((res) => {
            this.host_List = res.rows;
            this.loading = false;
            this.level = 2;
          });
          this.serviceId = "";
        } else if (node.model_example_id) {
          //根据业务id获取主机列表
          getToppologyListByExample_Api({
            ...this.query,
            exampleId: node.model_example_id,
          }).then((res) => {
            this.host_List = res.rows;
            this.loading = false;
            this.level = 1;
          });
          this.serviceId = "";
        }
      } else this.$message.info("没有找到您想要的数据，请确认关键词是否存在");
    },
    //递归查找树形数据的nodekey
    findNodeById(tree, name) {
      for (const iterator of tree) {
        if (iterator.model_example_name.includes(name)) {
          return iterator;
        }
        if (iterator.cgColonyVoList && iterator.cgColonyVoList.length > 0) {
          const result = this.findNodeById(iterator.cgColonyVoList, name);
          if (result !== null) {
            return result;
          }
        }
      }
      return null;
    },
    //列表搜索
    handleQuery() {
      this.loading = true;
      this.query = {
        pageNum: 1,
        pageSize: 10,
        modelExampleName: this.query.modelExampleName,
      };
      if (this.level == 3) {
        //根据服务id获取主机列表
        getHostListByServiceId_Api({
          ...this.query,
          serviceId: this.treeNodeData.serviceId,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
      } else if (this.level == 2) {
        //根据集群id获取主机列表
        getToppologyListByCluster_Api({
          ...this.query,
          colonyId: this.treeNodeData.cgColony.colonyId,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
      } else if (this.level == 1) {
        //根据业务id获取主机列表
        getToppologyListByExample_Api({
          ...this.query,
          exampleId: this.treeNodeData.model_example_id,
        }).then((res) => {
          this.host_List = res.rows;
          this.loading = false;
        });
      }
    },

    //关闭添加/修改弹窗
    closeModal() {
      this.addClusterForm = {};
      this.editClusterForm = {};
      this.addServiceForm = {};
      this.editServiceForm = {};
    },
    //删除实例
    delExample(id) {
      this.$confirm("是否确认删除该主机?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delModelExample_Api(id)
            .then((res) => {
              this.$message.success(res.msg);
              this.getDataQuery();
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //重新渲染组件 解决fixed错位问题
    doLayoutFun() {
      this.$nextTick(() => {
        //listTable为el-table的ref (ref='listTable')
        if (this.$refs.listTable) {
          this.$refs.listTable.doLayout();
        }
      });
    },
  },
  computed: {},
  watch: {
    //切换清空
    addClusterByTemplate() {
      this.addClusterForm = {};
    },
    addServiceByTemplate() {
      this.addServiceForm = {};
    },
    //刷新table组件
    tableData(val) {
      this.doLayoutFun();
    },
  },
  beforeRouteEnter(to, from, next) {
    if (
      from.path == "/configuration/business/addhost" ||
      from.path == "/configuration/business/Topology_Info"
    ) {
    } else {
      localStorage.removeItem("node");
    }
    next();
  },
};
</script>

<style lang="scss" scoped>
.tip {
  color: rgba(51, 51, 51, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial-regular;
  margin-bottom: 20px;
}

.company-name {
  font-family: Arial;
  font-weight: 700;
  font-size: 16px;
  color: rgb(51, 51, 51);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 18px;
  text-decoration: none;
  text-align: center;
  margin-bottom: 10px;
}

.qrcode {
  height: 153px;
  text-align: center;
}

.qrcode img {
  width: 150px;
  height: 150px;
}

.download {
  width: 100%;
  text-align: center;
}

.download-btn {
  font-size: 14px;
  font-family: Arial-regular;
}

.right-container {
  height: 100% !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  overflow: hidden;

  .fr {
    .iconfont {
      font-size: 1em;
      margin-left: 8px;
    }
  }
}

.avatar-wrap {
  width: 127px;
  height: 137px;
  border: 1px solid #eee;
  border-radius: 50%;
  // border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.avatar {
  width: 125px;
  height: 135px;
}

.avatar-uploader-icon {
  font-size: 58px;
  color: #ddd;
}

.img-wrap {
  height: 340px;
  overflow: auto;

  ::v-deep .el-radio__input {
    position: absolute;
    right: 0;
  }
}

.img-li {
  width: 115px;
  height: 160px;
}

.mb15 {
  text-align: left;
}

.member-info-modal {
  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  .modal-top {
    display: flex;
    align-items: center;
  }

  .modal-bottom {
    ::v-deep .el-form-item__content {
      width: calc(100% - 80px);
      position: relative;

      .el-cascader,
      .el-date-editor {
        width: 100%;
      }
    }

    .type-title {
      border-left: 2px solid #2d8ff4;
      padding-left: 12px;
      margin-left: 8px;
      margin-bottom: 14px;
      color: #333;
      height: 20px;
      line-height: 20px;
    }
  }
}

.staff-info {
  text-align: left;
  display: flex;

  img {
    width: 35px;
    height: 35px;
    border-radius: 5px;
  }

  .staff-name {
    margin-left: 5px;

    > div {
      width: 80px;
      padding-left: 5px;
    }
  }
}

.staff-top-search {
  background-color: #fff;
  padding: 5px;
}

.staff-body {
  flex: 1;
  height: 100%;
  overflow: hidden;

  .head-container {
    padding-top: 10px;
    border-radius: 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;

    .el-input {
      box-sizing: border-box;
      width: 90%;
      margin-left: 5%;
    }
  }
}

::v-deep .left-tree {
  width: 250px;
  padding: 10px;
  background-color: #fff;

  .el-tree-node__content {
    .custom-tree-node .toe {
      position: relative;
      box-sizing: border-box;
      padding-left: 25px;

      &::before {
        content: "业";
        display: block;
        width: 20px;
        height: 20px;
        background-color: #c4c6cc;
        border-radius: 50%;
        line-height: 20px;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 3px;
      }
    }
  }

  .el-tree-node__children {
    .custom-tree-node .toe {
      position: relative;
      box-sizing: border-box;
      padding-left: 25px;

      &::before {
        content: "集";
        display: block;
        width: 20px;
        height: 20px;
        background-color: #c4c6cc;
        border-radius: 50%;
        line-height: 20px;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 3px;
      }

      &.notTemplate {
        &::before {
          background-color: #97aed6;
        }
      }
    }

    .el-tree-node__children {
      .custom-tree-node {
        .toe {
          position: relative;
          box-sizing: border-box;
          padding-left: 25px;
          height: 100%;

          &::before {
            content: "服";
            display: block;
            width: 20px;
            height: 20px;
            background-color: #c4c6cc;
            border-radius: 50%;
            line-height: 20px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            position: absolute;
            left: 0px;
            top: 3px;
          }

          &.notTemplate {
            &::before {
              background-color: #97aed6;
            }
          }
        }
      }
    }
  }
}

.custom-tree-node {
  height: 100%;
  line-height: 26px;

  .toe {
    display: block;
    height: 100%;
  }
}

.staff-container-right {
  width: calc(100% - 260px);
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;

  .dk-corp-tip-text {
    .el-link--primary {
      color: #66b1ff;
      vertical-align: inherit;
      line-height: 18px;
    }

    .el-link.el-link--primary.is-underline:hover:after {
      border-bottom: 1px solid #66b1ff;
    }
  }
}

.staff-container-right-top {
  padding-bottom: 10px;
}

.new-form-item {
  padding: 0;
  margin-right: 5px !important;
  margin-top: 0px !important;
}

.pd15 {
  padding: 15px;
}

::v-deep .el-table .el-table__header-wrapper th {
  background: #eee;
}

.sync-user-btn {
  margin-left: 10px;
}

::v-deep .el-textarea .el-textarea__inner {
  padding-right: 45px;
}

.divider {
  margin: 0 10px;
  border: 1px solid #bbbbbb;
  height: 18px;
  display: inline-block;
  margin-bottom: -4px;
}

.drawer-div,
.extra-drawer-div {
  ::v-deep .el-drawer__container {
    .el-drawer {
      width: 780px !important;

      .el-drawer__header {
        > span {
          font-size: 20px;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }

  ::v-deep .el-drawer__header {
    margin-bottom: 15px;
  }

  ::v-deep .el-drawer__body {
    padding: 0 20px;
    height: calc(100% - 43px);
  }
}

::v-deep .el-table__body-wrapper {
  height: calc(100% - 63px) !important;
}

::v-deep .el-table__fixed-body-wrapper {
  top: 62px !important;
}
</style>
